<template>
  <div class="rightFirst pt-[20px] px-[18px] pb-[16px] flex flex-col">
    <!-- 实时告警  -->
    <div class="flex justify-between">
      <div v-for="(item, index) in imageList" :key="index" @click="showAlarmListInfo(item)">
        <div
          :class="index == 0 ? ' bg-[url(@/assets/screenimg/timealerts.png)]' : index == 1 ? ' bg-[url(@/assets/screenimg/timealerts2.png)]' : 'bg-[url(@/assets/screenimg/timealerts3.png)]'"
          class="
        w-[92px]
        h-[104px]
         bg-no-repeat ">
          <div :class="index == 0 ? 'text-[#FF802B]' : index == 1 ? 'text-[#D6D6D6]' : 'text-[#FF4141]'" class="text-[24px]  font-medium text-center
         pt-[52px]">
            <div v-if="item.number <= 999">{{ isNullOrEmpty(item.number) }}</div>
            <div v-else>999+</div>
          </div>
        </div>
        <div class="alltext text-center pt-[2px] pb-[20px]">{{ isNullOrEmpty(item.name) }}</div>
      </div>
    </div>
    <!-- 设备详情 轮播 opacity-[0.6]  py-[24px]-->
    <div class="h-[220px] flex-1 bgTab    px-[16px] rounded-[5px]">
      <el-carousel v-if="carousel.length != 0" indicator-position="none" class="h-full" :interval="5000" arrow="always">
        <el-carousel-item class="h-full" v-for="(item, index) in carousel" :key="index" @click="showInfo(item)">
          <div class="h-full flex items-center">
            <div class="h-[172px] w-[172px]">
              <el-image class="h-[172px] w-[172px]" :lazy="false" fit="scale-down" :src="item.deviceImg" :autoplay="false">
                <template #error>
                  <img src="@/assets/screenimg/null.png" />
                </template>
              </el-image>
            </div>
            <div class="ml-[20px]">
              <div class="text-[22px] text-[#ffffff] font-bold leading-[1.2]  line-clamp-1 overflow-hidden">{{ isNullOrEmpty(item.deviceName) }}</div>
              <div class="alltext mt-[20px]">
                <div class="text-[#7B8EA8]">设备序列号</div>
                <div class=" mt-[4px]">{{ isNullOrEmpty(item.deviceSN) }}</div>
              </div>
              <div class="alltext mt-[16px]">
                <div class="text-[#7B8EA8]">告警信息</div>
                <div class=" mt-[4px]">{{ isNullOrEmpty(item.alarmTitle) }}</div>
              </div>
              <div class="alltext mt-[16px]">
                <div class="text-[#7B8EA8]">告警时间</div>
                <div class=" mt-[4px]">{{ isNullOrEmpty(item.createdAt) }}</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <nullpng v-else />
    </div>
  </div>

</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { screerealtime } from '@/api/screen/largeData'
import { showAlarmList, showIndividualityAlarmInfo, showIndividualityAlarmList, showAlarmInfo } from '@/views/large-data-screen/utils'
import { emitter } from '@/utils/mitt'
const props = defineProps({
  searchType: {
    type: String || Number,
    default: 1
  },

});
const imageList = ref([
  {
    name: '故障',
    number: 0,
    type: 2
  },
  {
    name: '离线',
    number: 0,
    type: 3
  },
  {
    name: '报警',
    number: 0,
    type: 1
  }
])
const carousel = ref([])
onMounted(() => {
  getScreerealtime()
  emitter.on('alarmEvents', re)
})
onBeforeUnmount(() => {
  emitter.off('alarmEvents', re)
})
const re = (data) => {
  getScreerealtime()
}
const getScreerealtime = () => {
  screerealtime({
    searchType: props.searchType,//查询类型(1 单位 2 -个体概览)
    alarmType: '',//告警类型   0全部 1.告警 2故障 3 离线
    systematicId: '',//系统id
    page: 1,
    limit: 20

  }).then(res => {
    // console.log("试试告警", res);

    imageList.value[0].number = res.result.alarmReal.failure
    imageList.value[1].number = res.result.alarmReal.offline
    imageList.value[2].number = res.result.alarmReal.warning
    res.result.alarmRealDevice.total = 10
    carousel.value = res.result.alarmRealDevice.data
  })
}
const showInfo = (item) => {
  props.searchType == 2 && showIndividualityAlarmInfo(item)
  props.searchType == 1 && showAlarmInfo(item)
}
const showAlarmListInfo = (item) => {
  if (Number(props.searchType) == 1) {
    showAlarmList({ defaultSearch: { alarmType: item.type, searchType: props.searchType, confirm: -1 } })
  } else {
    showIndividualityAlarmList({ defaultSearch: { alarmType: item.type, searchType: props.searchType, confirm: -1 } })
  }
}
</script>

<style lang="scss" scoped>
.rightFirst {
  ::v-deep(.el-carousel__arrow) {
    width: 20px;
    height: 20px;
    background: #fff;
    opacity: 0.4;

  }

  ::v-deep(.el-icon) {
    color: #222222;
  }

  :deep(.el-carousel__container) {
    height: 100%;
  }

  :deep(.el-carousel__arrow--left) {
    left: 0px !important;
  }

  :deep(.el-carousel__arrow--right) {
    right: 0;
  }
}
</style>
